Component({
  properties: {
    // 控制弹出框是否显示
    showPopup: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal) {
        if (newVal) {
          this.showPopupAnimation();
        }
      }
    }
  },
  data: {
    popupAnimation: {}
  },
  lifetimes: {
    attached: function () {
      if (this.properties.showPopup) {
        this.showPopupAnimation();
      }
    }
  },
  methods: {
    showPopupAnimation: function () {
      // 创建动画实例
      const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out'
      });

      // 设置动画效果，从透明度 0 到 1，同时从底部滑入
      animation.opacity(1).translateY(0).step();
      this.setData({
        popupAnimation: animation.export()
      });
    },
    closePopup: function () {
      const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out'
      });
      // 设置关闭动画效果，从透明度 1 到 0，同时向上滑出
      animation.opacity(0).translateY(100).step();
      this.setData({
        popupAnimation: animation.export()
      });
      setTimeout(() => {
        this.triggerEvent('close');
        // this.setData({
        //   showPopup: false
        // });
      }, 300);
    }
  }
});